<template>
    <ReSelect
        ref="reSelectRef"
        :model-value="props.modelValue"
        v-bind="attrs"
        :filter-method="filterMethod"
        @update:model-value="(value:unknown) => emits('update:modelValue', value)"
    >
        <template
            v-for="(item,index) in props.data"
            :key="index"
        >
            <el-option-group
                v-if="props.selectType === 'selectGroup' && Array.isArray(item[props.childrenProp])"
                :label="item[groupLabelProp]"
            >
                <el-option
                    v-for="(child,childIndex) in item[props.childrenProp]"
                    :key="childIndex"
                    :label="child[props.labelProp]"
                    :value="child[props.valueProp]"
                    :disabled="child.disabled || false"
                />
            </el-option-group>
            <el-option
                v-else
                :label="item[props.labelProp]"
                :value="item[props.valueProp]"
                :disabled="item.disabled || false"
            />
        </template>
    </ReSelect>
</template>

<script lang="ts">
export default { name: 'ReSelectForm' }
</script>

<script lang="ts" setup>
import { getCurrentInstance, ComponentInternalInstance, reactive, PropType, ref, nextTick, onMounted, useAttrs, useSlots } from 'vue'
import ReSelect from '../ReSelect/index.vue'

// const slots = useSlots()
const attrs = useAttrs()
const emits = defineEmits(['update:modelValue'])
const { proxy } = getCurrentInstance() as ComponentInternalInstance

const props = defineProps({
    // eslint-disable-next-line vue/require-default-prop
    modelValue: null,
    // eslint-disable-next-line vue/require-default-prop
    filterMethod: null,
    data: {
        type: Array as PropType<any[]>,
        default: () => [],
    },
    filterProps: {
        type: Array,
        default: () => [],
    },
    trigger: {
        type: String,
        default: 'input', // input || blur || enter
    },
    selectType: {
        type: String,
        default: 'selectGroup', // select || selectGroup（带有children字段时自动生成组）
    },
    groupLabelProp: {
        type: String,
        default: 'label',
    },
    labelProp: {
        type: String,
        default: 'label',
    },
    valueProp: {
        type: String,
        default: 'value',
    },
    childrenProp: {
        type: String,
        default: 'children',
    },
})

const state = reactive({

})

const reSelectRef = ref()

const filterMethod = (value:string) => {
    if (attrs.filterable === undefined || attrs.filterable === false) return []

    if (typeof props.filterMethod === 'function') {
        return props.filterMethod(value)
    }

    if (props.filterProps.length) {
        const hiddenList:unknown[] = []
        props.data.forEach((dataItem) => {
            const index = props.filterProps.findIndex((searchProp:any) => {
                let propValue = dataItem[searchProp]
                if (typeof (dataItem[searchProp]) === 'number') propValue = dataItem[searchProp].toString()
                if (propValue) return propValue.indexOf(value) !== -1
                return false
            })
            if (index === -1) hiddenList.push(dataItem[props.valueProp])
        })
        return hiddenList
    }

    return []
}

// defineExpose({

// })
</script>
